<template>
  <!-- 轮播图 -->
  <div class="home-index">
    <Swiper />
    <!-- 推荐 -->
    <Recomend :recomend="recomends" />
    <!-- 横幅 -->
    <Banner />

    <a class="van-sticky">
      <div @click="getList('reccomd')">
        <span>推荐</span>
        <span class="icon iconfont icon-shangxiajiantou"></span>
      </div>
      <div @click="getList('inventory')">
        <span>销量</span>
        <span class="icon iconfont icon-shangxiajiantou"></span>
      </div>
      <div @click="getList('minPrice')">
        <span>价格</span>
        <span class="icon iconfont icon-shangxiajiantou"></span>
      </div>
    </a>
    <!-- 商品列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <GoodsList :lists="lists" />
    </van-list>
    <!-- 底部导航栏 -->
    <Footer />
  </div>
</template>

<script>
import Footer from "@components/Footer.vue";
import Swiper from "@view/Home/children/listChild/Swiper.vue";
import GoodsList from "@view/Home/children/listChild/GoodsList.vue";
import Recomend from "@view/Home/children/listChild/Recomend.vue";
import Banner from "@/view/Home/children/listChild/Banner.vue";
// 列表请求
// import { getList } from "@api/product.js";
import { get } from "@/request/index";
export default {
  data() {
    return {
      lists: [],
      currPage: 1,
      recomends: [],
      loading: false,
      finished: false,
      currPage: 1,
      categoryId: "reccomd",
    };
  },
  components: {
    Footer,
    Swiper,
    GoodsList,
    Recomend,
    Banner,
  },
  created() {
    this.getList();
    this.getRecomend();
  },
  methods: {
    // 获取商品列表
    getList(type = "reccomd") {
      // 重置
      // this.$refs.list.scrollTo(0, 0);
      this.currPage = 1;
      this.finished = false;
      this.lists = [];
      console.log("当前页", this.currPage);
      this.categoryId = type;
      // 默认currPage = 1，因为这是专门切换推荐，销量，价格的函数
      let obj = {
        currPage: 1,
        type: this.categoryId,
      };
      get("/product/list", obj)
        .then((res) => (this.lists = res.list))
        .catch((err) => console.log(err));
    },
    //   getList(this.currPage, type)
    //     .then((res) => {
    //       // console.log(res);
    //       this.lists = res.list;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    getRecomend() {
      get("/category/all")
        .then((res) => {
          this.recomends = res.list;
          console.log("分类页", res.list);
        })
        .catch((err) => console.log("获取推荐失败", err));
    },
    onLoad() {
      this.currPage++;
      let obj = {
        type: this.categoryId,
        currPage: this.currPage,
      };
      //1.ajax 请求
      get("product/list", obj)
        .then((res) => {
          console.log(res);
          // 合并列表
          this.lists = [...this.lists, ...res.list];
          //2. 加载状态结束
          this.loading = false;

          // 3.数据全部加载完成
          if (res.list.length == 0) {
            this.finished = true;
          }
        })
        .catch((err) => console.log("获取列表失败", err));
    },
  },
};
</script>

<style lang="less">
@import "./list.less";
</style>